<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>二手买卖</title>
    <!--#include virtual="inc/common_head.html" -->
    <!--#include virtual="inc/detail_head.html" -->
  </head>
  <body id="main">
    <!--#include virtual="_header.html" -->
    <div class="main-content">
        <!--#include virtual="slider.html" -->
    </div>
    <div class="loading"></div>
    <div class="detail-content" id="detail-content">
        <section class="issue-page fixed-page" v-bind:class="{ active: issuePage}" @click="closeIssuePage">
            <div class="issue-content">
                <form class="issue-form">
                    <span class="close-icon" @click="closeIssuePage"></span>
                    <h3 class="base-title">基础信息</h3>
                    <div class="equipment-name common-input-style">
                        <span class="red-icon">* </span>设备名称
                        <input type="text" v-model="equipment" name="equipment" value="" placeholder="vvpool"/>
                        <span class="remind-equipment remind-style">
                            请填设备名称
                        </span>
                    </div>
                    <div class="select-id common-input-style">
                        <span class="red-icon">* </span>选择显卡
                        <select class="select-choose" v-model="selectId">
                            <option disabled value="">请选择</option>
                            <option v-for="(item,index) in cardListId" v-bind:value="item.id">{{item.cardName}}</option>
                        </select>
                        <span class="remind-cardType remind-style">
                            请选择显卡
                        </span>
                    </div>
                    <div class="purchase-date common-input-style">
                        <span class="red-icon">* </span>购买日期
                        <!-- <input type="text" v-model="purchaseDate" name="purchaseDate" value="" placeholder="2018-01-01"/> -->
                        <date-picker @update-date="updateDate"></date-picker>
                        <span class="remind-date remind-style">
                            请填正确日期格式（如2018-01-01）
                        </span>
                    </div>

                    <div class="issue-price common-input-style">
                        <span class="red-icon">* </span>价格
                        <input type="text" v-model="price" name="price" value="" placeholder=""/>
                        <span class='unit-remind'>台/张</span>
                        <span class="remind-price remind-style">
                            请填价格
                        </span>
                    </div>
                    <div class="issue-num common-input-style">
                        <span class="red-icon">* </span>数量
                        <input type="text" v-model="number" name="number" value="" placeholder=""/>
                        <span class="remind-num remind-style">
                            请填数量
                        </span>
                    </div>
                    <div class="common-input-style other-style">
                        <span class="red-icon">* </span>
                        <span>
                            其他备注
                        </span>
                        <textarea rows="50" cols="3" v-model="otherInfo"></textarea>
                        <!-- <input type="textarea" name="equipment" value="" placeholder=""/> -->
                    </div>
                    <span class="remind-other remind-style">
                        请填备注
                    </span>
                    <div class="upload-photo">
                        <span class="red-icon">* </span>
                        <span class="upload-title">上传照片</span>
                        <input class="upload-input" type="text" id="uploadImgSrc" v-model="imgSrc" value=""/>
                        <input type="file" name="multipartFile" id="uploadImg"/>
                        <span class="remind-img remind-style">
                            请上传照片
                        </span>
                    </div>
                    <h3 class="base-title other-title">其他信息</h3>
                    <div class="relative-people common-input-style">
                        <span class="red-icon">* </span>联系人
                        <input type="text" v-model="relativeName" name="relativeName" value="" placeholder=""/>
                        <span class="remind-person remind-style">
                            请填联系人姓名
                        </span>
                    </div>
                    <div class="relative-phone common-input-style">
                        <span class="red-icon">* </span>联系电话
                        <input type="text" v-model="phoneNum" name="phoneNum" value="" placeholder=""/>
                        <span class="remind-phone remind-style">
                            请填写正确联系电话
                        </span>
                    </div>
                    <div class="form-btn">
                        <span class="form-cancel" @click="formCancel">取消</span>
                        <span class="form-sure" @click="formSure">确认发布</span>
                    </div>
                </form>
            </div>
        </section>
        <div class="search-content">
            <input type="text" index="1" name="code" v-model = "searchKey"  value="" class="search-input" placeholder="敬请期待"  v-on:keyup.13="shopListFun(pageNum,searchKey)"/>
            <input type="button" name="search" value="搜 索" class="search-btn" @click="shopListFun(0,searchKey)"/>
            <span class="issue-info" v-on:click="showIssuePage">发布信息</span>

        </div>
        <div class="shop-list" v-if="shopList.length !== 0" v-model="">
            <div class="shop-content-list"  v-for="(item,index) in shopList" @click="showDetailPage(index)">
                <div class="img-part">
                    <div v-bind:style = "item.pictureUrl"></div>
                </div>
                <div class="shop-info">
                    <h3 class="shop-title">{{item.goodName}}（{{item.memberName}}转让）</h3>
                    <p class="shop-type">
                        矿机类型：{{item.cardTypeName}}
                    </p>
                    <p class="shop-date">
                        购买日期：{{item.buyDate}}
                    </p>
                </div>
                <p class="shop-price">
                    {{item.price}}<span>元/台</span>
                </p>
            </div>
            <div class="shop-detail-page fixed-page" v-for="(item,index) in shopList" @click="closeDetailPage">
                <div class="show-detail-content">
                    <div class="detail-content-header">
                        <div class="img-part">
                            <div v-bind:style = "item.pictureUrl"></div>
                        </div>
                        <div class="detail-content-info">
                            <h3>{{item.goodName}}（{{item.memberName}}转让）</h3>
                            <h5>
                                <span>{{item.price}}</span>
                                元/台
                            </h5>
                            <p>
                                <span class="type">矿机类型：{{item.cardTypeName}}</span>
                                <span>购买日期：{{item.buyDate.slice(0,10)}}</span>
                            </p>
                            <p class="shop-name">
                                商家：<span>{{item.linkName}}</span>
                            </p>
                            <div class="user-phone">
                                <span></span>
                                {{item.linkTel}}
                            </div>
                        </div>
                    </div>
                    <div class="detail-describe">
                        <h6>矿机描述</h6>
                        <p>
                            {{item.remarks}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="no-search">
            <p>
                没有搜索结果
            </p>
        </div>

        <div class="paging-bar">
            <paginate
                :page-count="pageNum"
                :page-range="5"
                :margin-pages="2"
                :click-handler="clickCallback"
                :prev-text="'←'"
                :next-text="'→'"
                :container-class="'pagination'"
                :page-class="'page-item'">
            </paginate>
         </div>

         <div class="remind-info">
             <span class="close-icon close-remind"></span>
             <p>
                 {{remindInfo}}
             </p>
             <p>
                 {{remindInfo1}}
             </p>
         </div>

    </div>
    <!--#include virtual="_footer.html" -->
    <!--#include virtual="inc/common_foot.html" -->
    <!--#include virtual="inc/detail_foot.html" -->
  </body>
</html>
